<h3>@ngrx/store Party Planner</h3>

<div class="margin-bottom-10">
  Percent Attendance: {{percentAttendance$ | async}}%
</div>

<party-stats [invited]="(model$ | async)?.total"
             [attending]="(model$ | async)?.attending"
             [guests]="(model$ | async)?.guests">
</party-stats>

<filter-select (updateFilter)="updateFilter($event)"></filter-select>

<person-input (addPerson)="addPerson($event)"></person-input>

<person-list [people]="(model$ | async)?.people"
             (addGuest)="addGuest($event)"
             (removeGuest)="removeGuest($event)"
             (removePerson)="removePerson($event)"
             (toggleAttending)="toggleAttending($event)"></person-list>
